package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

// Chart is an example usage of ChartComponent
templ Chart() {
	@layouts.DocsLayout(
		"Chart",
		"Beautiful charts. Built using Chart.js.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "examples",
				Text: "Examples",
				Children: []modules.TableOfContentsItem{
	
					{
						ID:   "bar-multiple",
						Text: "Bar Chart - Multiple",
					},
					{
						ID:   "bar-horizontal",
						Text: "Bar Chart - Horizontal",
					},
					{
						ID:   "bar-negative",
						Text: "Bar Chart - Negative",
					},
					{
						ID:   "bar-stacked",
						Text: "Bar Chart - Stacked",
					},
					{
						ID:   "line",
						Text: "Line Chart",
					},
					{
						ID:   "line-linear",
						Text: "Line Chart - Linear",
					},
					{
						ID:   "line-step",
						Text: "Line Chart - Step",
					},
					{
						ID:   "line-multiple",
						Text: "Line Chart - Multiple",
					},
					{
						ID:   "area",
						Text: "Area Chart",
					},
					{
						ID:   "area-linear",
						Text: "Area Chart - Linear",
					},
					{
						ID:   "area-step",
						Text: "Area Chart - Step",
					},
					{
						ID:   "area-stacked",
						Text: "Area Chart - Stacked",
					},
					{
						ID:   "pie",
						Text: "Pie Chart",
					},
					{
						ID:   "pie-stacked",
						Text: "Pie Chart - Stacked",
					},
					{
						ID:   "pie-legend",
						Text: "Pie Chart - Legend",
					},
					{
						ID:   "doughnut",
						Text: "Doughnut Chart",
					},
					{
						ID:   "doughnut-stacked",
						Text: "Doughnut Chart - Stacked",
					},
					{
						ID:   "doughnut-legend",
						Text: "Doughnut Chart - Legend",
					},
					{
						ID:   "radar",
						Text: "Radar Chart",
					},
					{
						ID:   "radar-stacked",
						Text: "Radar Chart - Stacked",
					},
				},
			},
			{
				ID:   "api-reference",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "chart",
						Text: "Chart",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Chart",
			Description: templ.Raw(`Beautiful charts. Built using <a href="https://chartjs.org" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Chart.js</a>.`),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Chart",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.ChartDefault(),
				PreviewCodeFile: "chart_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "chart",
					JSFiles:       []string{"chart"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Bar Chart - Multiple",
					ShowcaseFile:    showcase.ChartBarMultiple(),
					PreviewCodeFile: "chart_bar_multiple.templ",
					ID:              "bar-multiple",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Bar Chart - Horizontal",
					ShowcaseFile:    showcase.ChartBarHorizontal(),
					PreviewCodeFile: "chart_bar_horizontal.templ",
					ID:              "bar-horizontal",
				})
				// Bar Charts
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Bar Chart - Negative",
					ShowcaseFile:    showcase.ChartBarNegative(),
					PreviewCodeFile: "chart_bar_negative.templ",
					ID:              "bar-negative",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Bar Chart - Stacked",
					ShowcaseFile:    showcase.ChartBarStacked(),
					PreviewCodeFile: "chart_bar_stacked.templ",
					ID:              "bar-stacked",
				})
				// Line Charts
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Line Chart",
					ShowcaseFile:    showcase.ChartLine(),
					PreviewCodeFile: "chart_line.templ",
					ID:              "line",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Line Chart - Linear",
					ShowcaseFile:    showcase.ChartLineLinear(),
					PreviewCodeFile: "chart_line_linear.templ",
					ID:              "line-linear",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Line Chart - Step",
					ShowcaseFile:    showcase.ChartLineStep(),
					PreviewCodeFile: "chart_line_step.templ",
					ID:              "line-step",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Line Chart - Multiple",
					ShowcaseFile:    showcase.ChartLineMultiple(),
					PreviewCodeFile: "chart_line_multiple.templ",
					ID:              "line-multiple",
				})
				// Area Charts
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Area Chart",
					ShowcaseFile:    showcase.ChartArea(),
					PreviewCodeFile: "chart_area.templ",
					ID:              "area",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Area Chart - Linear",
					ShowcaseFile:    showcase.ChartAreaLinear(),
					PreviewCodeFile: "chart_area_linear.templ",
					ID:              "area-linear",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Area Chart - Step",
					ShowcaseFile:    showcase.ChartAreaStep(),
					PreviewCodeFile: "chart_area_step.templ",
					ID:              "area-step",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Area Chart - Stacked",
					ShowcaseFile:    showcase.ChartAreaStacked(),
					PreviewCodeFile: "chart_area_stacked.templ",
					ID:              "area-stacked",
				})
				// Pie Charts
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Pie Chart",
					ShowcaseFile:    showcase.ChartPie(),
					PreviewCodeFile: "chart_pie.templ",
					ID:              "pie",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Pie Chart - Stacked",
					ShowcaseFile:    showcase.ChartPieStacked(),
					PreviewCodeFile: "chart_pie_stacked.templ",
					ID:              "pie-stacked",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Pie Chart - Legend",
					ShowcaseFile:    showcase.ChartPieLegend(),
					PreviewCodeFile: "chart_pie_legend.templ",
					ID:              "pie-legend",
				})
				// Doughnut Charts
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Doughnut Chart",
					ShowcaseFile:    showcase.ChartDoughnut(),
					PreviewCodeFile: "chart_doughnut.templ",
					ID:              "doughnut",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Doughnut Chart - Stacked",
					ShowcaseFile:    showcase.ChartDoughnutStacked(),
					PreviewCodeFile: "chart_doughnut_stacked.templ",
					ID:              "doughnut-stacked",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Doughnut Chart - Legend",
					ShowcaseFile:    showcase.ChartDoughnutLegend(),
					PreviewCodeFile: "chart_doughnut_legend.templ",
					ID:              "doughnut-legend",
				})
				// Radar Charts
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Radar Chart",
					ShowcaseFile:    showcase.ChartRadar(),
					PreviewCodeFile: "chart_radar.templ",
					ID:              "radar",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Radar Chart - Stacked",
					ShowcaseFile:    showcase.CharRadarStacked(),
					PreviewCodeFile: "chart_radar_stacked.templ",
					ID:              "radar-stacked",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api-reference",
			}) {
				@modules.APILegend()
				<div id="chart">
					@modules.APITable(modules.APITableProps{
						Title:       "Chart",
						Description: "Main chart component that renders various chart types.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "chart-{randomID}",
								Description: "Unique identifier for the chart element",
							},
							{
								Name:        "Variant",
								Type:        "Variant",
								Default:     "-",
								Description: "Type of chart to render",
							},
							{
								Name:        "Data",
								Type:        "Data",
								Default:     "-",
								Description: "Chart data configuration including labels and datasets",
							},
							{
								Name:        "Options",
								Type:        "Options",
								Default:     "{}",
								Description: "Chart configuration options",
							},
							{
								Name:        "ShowLegend",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display the chart legend",
							},
							{
								Name:        "ShowXAxis",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display the X-axis",
							},
							{
								Name:        "ShowYAxis",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display the Y-axis",
							},
							{
								Name:        "ShowXLabels",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display X-axis labels",
							},
							{
								Name:        "ShowYLabels",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display Y-axis labels",
							},
							{
								Name:        "ShowXGrid",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display X-axis grid lines",
							},
							{
								Name:        "ShowYGrid",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display Y-axis grid lines",
							},
							{
								Name:        "Horizontal",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to render the chart horizontally",
							},
							{
								Name:        "Stacked",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to stack chart elements",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the chart container",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the chart container",
							},
						},
					})
				</div>
			}
		}
	}
}
